<template>
	<view>
		<view class="header">
			<image class="header-img" src="../../static/images/private_header.png" mode=""></image>
		</view>
		
		<view class="form-main">
			<view class="form-content">
				<view class="form-pad">
					<view class="form-title">
						<text>VIP旅行定制</text>
					</view>
					<view class="form-ftitle">
						<text>干货满满，请大家积极报名</text>
					</view>
					<view class="form-input">
						<view class="form-input-title">
							<text>姓名</text><text class="color-red">*</text>
						</view>
						<view class="form-input-content">
							<view class="form-input-icon">
								<image class="form-input-icon-img" src="/static/images/name.png"></image>
							</view>
							<view class="form-input-text">
								<input class="form-input-text-con" type="text" v-model="username" placeholder="请输入姓名">
							</view>
							
						</view>
					</view>
					
					<view class="form-input">
						<view class="form-input-title">
							<text>手机</text><text class="color-red">*</text>
						</view>
						<view class="form-input-content">
							<view class="form-input-icon">
								<image class="form-input-icon-img" src="/static/images/phone.jpg"></image>
							</view>
							<view class="form-input-text">
								<input class="form-input-text-con" v-model="phone" type="text" placeholder="请输入手机号">
							</view>
							<!-- <view class="form-input-clear">
								<text>清除</text>
							</view> -->
							
						</view>
					</view>
					
					<view class="form-input">
						<view class="form-input-title">
							<text>出游人数</text><text class="color-red">*</text>
						</view>
						<view class="form-input-content">
							<view class="form-input-normal">
								<input class="form-input-text-normal" v-model="number" type="text" placeholder="请输入出游人数">
							</view>
						</view>
					</view>
					
					<view class="form-input">
						<view class="form-input-title">
							<text>出游天数</text><text class="color-red">*</text>
						</view>
						<view class="form-input-content">
							<view class="form-input-normal">
								<input class="form-input-text-normal" v-model="days" type="text" placeholder="请输入出游天数">
							</view>
						</view>
					</view>
					
					<view class="form-input">
						<view class="form-input-title">
							<text>人均预算/元/人</text><text class="color-red">*</text>
						</view>
						<view class="form-input-content">
							<view class="form-input-normal">
								<input class="form-input-text-normal" v-model="budget" type="text" placeholder="请输入人均预算">
							</view>
						</view>
					</view>
					
					<view class="form-input">
						<view class="form-input-title">
							<text>计划出游时间</text><text class="color-red">*</text>
						</view>
						<view class="form-input-content">
							<view class="form-input-icon">
								<image class="form-input-icon-img" src="/static/images/date.jpg"></image>
							</view>
							<view class="form-input-text">
								<picker class="uni-input" mode="date" :value="date" @change="bindDateChange">
									<view class="uni-input">{{date}}</view>
								</picker>
							</view>
							<!-- <view class="form-input-clear">
								<text>清除</text>
							</view> -->
							
						</view>
					</view>
					
					<view class="form-input">
						<view class="form-input-title">
							<text>备注</text>
						</view>
						<view class="form-input-content">
							<view class="uni-textarea">
								<textarea class="form-textarea" v-model="remarks" />
							</view>
						</view>
					</view>
					
					
					<view class="submit" @tap.stop='makePlan()'>
						<view class="submit-button">
							<text>提交旅行定制师</text>
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
		
		<view class="contact">
			<view class="contact-top">
				<view class="contact-top-left">
					<image class="contact-top-img" :src="kefu.head_img" @error="imageError"></image>
				</view>
				<view class="contact-top-right">
					<view class="contact-name">
						<text class="contact-main-name">{{kefu.username}}</text><text class="contact-main-position">客服</text>
					</view>
					<view class="contact-tel">
						<image class="contact-top-icon" src="/static/images/chat.png" @error="imageError"></image>
						<text class="contact-desc">{{kefu.phone}}</text>
					</view>
					<view class="contact-tel" @tap.stop="getLocation">
						<image class="contact-top-icon" src="/static/images/address.png" @error="imageError"></image>
						<text class="contact-desc">{{kefu.address}}</text>
					</view>
				</view>
			</view>
			<view class="contact-bottom">
				<view class="contact-bottom-button" @tap.stop="makePhone">
					<text>一键拨号</text>
				</view>
			</view>
		</view>
		
	
	</view>

</template>

<script>
	export default {
		data() {
			return {
				date: '',
				username: '',
				phone:'',
				number: '',
				days: '',
				budget: '',
				remarks: '',
				openid: '',
				tuijian:'',
				kefu: [],
				longitude: '',
				latitude: ''
			}
		},
		onLoad() {
			let _this = this
			_this.openid = uni.getStorageSync('openid');
			_this.tuijian = uni.getStorageSync('salesman_code')
			_this.getKefu()
		},
		methods: {
			getLocation(){
				let _this = this
				uni.openLocation({
				    latitude: parseFloat(_this.latitude),
				    longitude: parseFloat(_this.longitude),
				    success: function () {
				        console.log('success');
				    }
				});
			},
			makePhone() {
				let _this = this
				uni.makePhoneCall({
					phoneNumber: _this.kefu.phone
				})
			},
			getKefu() {
				let _this = this
				_this.http.apiResquest({
					url: 'api/index/salesman?openid=' + _this.openid + '&salesman_code=' + _this.tuijian,
					method: 'GET'
				}).then(res=>{
					_this.kefu = res
					_this.longitude = res.longitude
					_this.latitude = res.latitude
				})
			},
			makePlan() {
				let _this = this
				let openid = uni.getStorageSync('openid');
				let data = {
					username: _this.username,
					phone:_this.phone,
					number: _this.number,
					days: _this.days,
					budget: _this.budget,
					remarks: _this.remarks,
					lv_time: _this.date,
					openid: openid
				}
				_this.http.apiResquest({
					url: 'api/index/vip',
					method: 'POST',
					query: data
				}).then(res=>{
					uni.redirectTo({
						url: '/pages/index/index'
					})
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
		}
	}
</script>

<style>
.header{
	width: 100%;
	height: 280rpx;
}
.header-img{
	width: 100%;
	height: 280rpx;
}
.form-main{
	width: 100%;
	background-color: #F4F4F4;
}
.form-content{
	width: 90%;
	position: relative;
	top: -50rpx;
	left: 5%;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding-bottom: 50rpx;
}
.form-pad{
	width: 90%;
	position: relative;
	left: 5%;
	top: 20rpx;
}
.form-title{
	font-size: 40rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #73CF8A;
	font-weight: bold;
}
.form-ftitle{
	font-size: 30rpx;
	height: 60rpx;
	line-height: 60rpx;
	color: #999;
	font-weight: bold;
}
.form-input{
	width: 100%;
	margin-top: 20rpx;
}
.form-input-title{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: bold;
	color: #333;
}
.form-input-content{
	width: 100%;
	border: 1rpx solid #999;
	border-radius: 10rpx;
	display: flex;
}
.form-input-icon{
	width: 15%;
	height: 80rpx;
}
.form-input-icon-img{
	width: 40rpx;
	height: 40rpx;
	position: relative;
	top: 20rpx;
	left: 20rpx;
}
.form-input-text{
	width: 70%;
	height: 80rpx;
	line-height: 80rpx;
}
.form-input-text-con{
	height: 80rpx;
	line-height: 80rpx;
}
.form-input-clear{
	width: 15%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ABCEF5;
	font-size: 26rpx;
}
.form-input-normal{
	width: 100%;
}
.form-input-text-normal{
	height: 80rpx;
	line-height: 80rpx;
	padding-left: 30rpx;
}
.form-textarea{
	padding: 10rpx;
}
.uni-input{
	height: 80rpx;
}
.submit{
	width: 100%;
	height: 80rpx;
	border-radius: 10rpx;
	background-color: #4DC269;
	color: #FFFFFF;
	text-align: center;
	line-height: 80rpx;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
	font-size: 32rpx;
	letter-spacing: 16rpx;
	font-weight: 500;
}
.color-red{
	color: red;
}
.contact{
	width: 100%;
	font-size: 24rpx;
	color: #999999;
}
.contact-top{
	padding: 20rpx;
	display: flex;
}
.contact-top-left{
	width: 20%;
	height: 130rpx;
}
.contact-top-img{
	width: 100%;
	height: 100%;
}
.contact-right{
	width: 80%;
}
.contact-name{
	width: 100%;
	height: 50rpx;
	margin-left: 20rpx;
}
.contact-top-icon{
	margin-left: 20rpx;
	width: 30rpx;
	height: 30rpx;
}
.contact-tel{
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
}
.contact-desc{
	margin-left: 20rpx;
	height: 40rpx;
	line-height: 40rpx;
}
.contact-main-name{
	font-size: 28rpx;
	color: #333;
}
.contact-main-position{
	margin-left: 20rpx;
}
.contact-bottom{
	width: 100%;
	font-weight: 500;
}
.contact-bottom-button{
	width: 70%;
	position: relative;
	left: 15%;
	height: 70rpx;
	background-color: #4DC269;
	color: #FFFFFF;
	text-align: center;
	margin-top: 20rpx;
	margin-bottom: 40rpx;
	line-height: 70rpx;
	font-size: 38rpx;
	border-radius: 20rpx;
	letter-spacing: 16rpx;
	font-weight: 700;
}

</style>
